<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>活动管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <!--标准mui.css-->
    <link rel="stylesheet" th:href="@{/css/mui.min.css}">
    <!--App自定义的css-->
    <link rel="stylesheet" th:href="@{/css/app.css}"/>
    <style>
        .mui-pull-right {
            font-size: 15px;
            top: 10px;
            position: relative;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title" th:text="${article.title}"></h1>
    <!--<a class="mui-icon-right-nav mui-pull-right"> 报名</a>-->
</header>
<div class="mui-content">
    <div class="mui-card" id="mui-card">
        <div class="mui-card-header">
            <a id="dianZan" th:onclick="'clickUpVote('+${article.hit}+')'">点赞：
                <th:block th:text="${article.hit}"></th:block>
            </a>
            <a id="baoming" onclick="clickBaoMing(0)" th:if="${categoryId}==3">报名</a>
        </div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <p><span th:text="${#dates.format(article.createTime,'yyyy-MM-dd')}"></span></p>
                <span th:utext="${article.content}"></span>
            </div>
        </div>
        <div class="mui-card-footer">
            <a class="mui-card-link" style="color: initial">评论数量：
                <th:block th:text="${#lists.size(list)}"></th:block>
            </a>
            <a class="mui-card-link" href="#forward">写评论</a>
        </div>
        <div class="mui-card-footer" th:each="itemC :${list}">
            <p th:text="${itemC.content}"></p>
        </div>
       <!-- <div class="mui-card-footer">
            <p>这就是我想好看的文章，我喜欢的的。。。</p>
        </div>-->
    </div>

    <div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <form class="mui-input-group">
                    <div class="mui-input-row">
                        <input type="text" id="txt" class="mui-input-clear" placeholder="请输入留言内容">
                    </div>
                    <div class="mui-button-row">
                        <button class="mui-btn mui-btn-primary" type="button" onclick="clickOk()">确认</button>&nbsp;&nbsp;
                        <button class="mui-btn mui-btn-primary" type="button" onclick="clickCancel()">取消</button>
                    </div>
                </form>
            </li>
        </ul>
    </div>
</div>
<script th:src="@{/js/mui.min.js}"></script>
<script th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script th:src="@{/js/app.js}"></script>
<script>
    var ctx = "[[@{/}]]";
</script>
<script>

    var tid = '[[${article.id}]]';
    var comment_type = "article";
    init();

    function init() {
        initLookNum();
        initBaoMing();
        iniUpVote();
    };

    //浏览次数
    function initLookNum() {
        var url = ctx + "blog/article/view";
        post(url, {"articleId": tid}, function (json) {
            if (json.code != 0 && json.code != '0') {
                console.log(json.msg);
            }
        });
    };

    //初始化报名
    function initBaoMing() {
        var url = ctx + "appArticleMine/queryArticleMine";
        post(url, {"articleId": tid, "type": 0,}, function (json) {
            if (json.code == 0 && json.data.id > 0) {
                $("#baoming").text("取消报名");
                $("#baoming").attr("attrid", json.data.id);
                console.log(json.msg);
            }
        });
    }

    //初始化点赞
    function iniUpVote() {
        var url = ctx + "appArticleMine/queryArticleMine";
        post(url, {"articleId": tid, "type": 1,}, function (json) {
            if (json.code == 0 && json.data.id > 0) {
                $("#dianZan").attr("style", "color:inherit");
                console.log(json.msg);
            }
        });
    }

    //操作报名
    function clickBaoMing(name) {
        var txt = $("#baoming").text();
        if (txt == "报名") {
            var url = ctx + "appArticleMine/add";
            var data = {
                "articleId": tid,
                "type": 0,
            };
            post(url, data, function (json) {
                if (json.code == 0) {
                    $("#baoming").text("取消报名");
                    console.log(json.msg);
                }
            });

        } else {
            var url = ctx + "appArticleMine/del";
            var data = {"id": $("#baoming").attr("attrid"),};
            post(url, data, function (json) {
                $("#baoming").text("报名");
                console.log(json.msg);
            });
        }
    };

    //操作点赞
    function clickUpVote(num) {
        var url = ctx + "blog/article/upVote";
        post(url, {"articleId": tid}, function (json) {
            if (json.code == 0) {
                if (json.msg == '已经点赞') {
                    mui.toast("已经点赞了！");
                } else {
                    var hit = Number([[${article.hit}]]) + Number(1);
                    $("#dianZan").text("点赞：" + hit);
                    addUpVoteRecoder();
                }
                $("#dianZan").attr("style", "color:inherit");

            }
        });

    }

    //记录点赞
    function addUpVoteRecoder() {
        var url = ctx + "appArticleMine/add";
        var data = {
            "articleId": tid,
            "type": 1,
        };
        post(url, data, function (json) {
            if (json.code == 1) {
            }
        });
    }

    //点击确定
    function clickOk() {
       var txt= $("#txt").val();
       if(txt.length>0){
           var url=ctx +"appArticleMine/addComment";
           var data={
               tid:tid,
               type:"liuyan",
               content:txt,
               address:'[[${article.title}]]',
           };
           post(url,data,function (result) {
               if(result.code==0){
                   var html=getHtml(txt);
                   $("#mui-card").append(html);
                   $("#txt").val("");
                   clickCancel();
               }
           });

       }else{
           mui.toast("请输入留言内容");
       }
    }
    function getHtml(val) {
        var html=' <div class="mui-card-footer">\n' +
            '            <p>'+val+'</p>\n' +
            '        </div>';
        return html;
    }

    //取消
    function clickCancel() {
        mui("#forward").popover("hide");
    }

</script>
</body>

</html>
